<template>
	<view>
		<tui-bottom-popup :show="show" @close="close">
			<tui-list-cell :hover="false">
				<view class="tui-pay-item__title">
					<view>请选择支付方式</view>
					<view>冻结金额：<text class="tui-pay-amuont">￥{{total_price}}</text></view>
				</view>
			</tui-list-cell>
			<radio-group @change="checks">
				<tui-list-cell unlined>
					<label class="tui-pay-item istrue">
						<image src="/static/images/pay/icon_pay_balance.png" class="tui-pay-logo"></image>
						<text v-if="balance<total_price">余额支付（余额{{balance}}，余额支付）</text>
						<text v-else>余额支付（余额{{balance}}）</text>
						<view class="tui-radio" v-if="balance>=total_price">
							<radio color="#ffad10" value="2"></radio>
						</view>
					</label>
				</tui-list-cell>
				<tui-list-cell unlined>
					<label class="tui-pay-item istrue">
						<image src="/static/images/pay/icon_pay_balance.png" class="tui-pay-logo"></image>
						<text v-if="coin<total_price">消费券支付（消费券{{coin}}，消费券支付）</text>
						<text v-else>消费券支付（消费券{{coin}}）</text>
						<view class="tui-radio" v-if="coin>=total_price">
							<radio color="#ffad10" value="3"></radio>
						</view>
					</label>
				</tui-list-cell>
			</radio-group>
			<view class="tui-btn-pay">
				<tui-button height="88rpx" type="orange" shape="circle" shadow @click="btnPay">去付款</tui-button>
			</view>
		</tui-bottom-popup>
		
	
	</view>
</template>

<script>
	
	import {
		wxJsPay,
		isWxBrowser
	} from '@/utils/mixin';
	export default {
		name: 'tPayLock',
		props: {
			//控制显示
			show: {
				type: Boolean,
				default: false
			},
			show2: {
				type: Boolean,
				default: false
			},
			modal1: false,
			page: {
				type: Number,
				default: 1
			},
			total_price: "",
			balance:'',
			coin:'',
		},


		data() {
			return {
				pay_type: 2,
			};
		},
		methods: {
			
			popupCloses() {
				this.show2 = false
			},
			close() {
				this.$emit("close", {})
			},
			checks(e) {
				this.pay_type = e.detail.value;
			},
			close2() {
				this.$emit("close", {})
			},

			show1() {
				this.modal1 = true;
			},
			hide1: function() {
				this.modal1 = false;
			},
			btnPay() {
				let token = this.tui.getToken();
				let pays = {};
				// #ifdef H5
				let ua = window.navigator.userAgent.toLowerCase()
				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					this.pay_iswx = 1;
				}
				// #endif
				pays = {
					token: token,
					money: this.total_price,
					pay_type: this.pay_type,
				}
				let paytype = this.tui.request('user', 'post', pays, 1000, 1, '', 'lockbalance');
				Promise.resolve(paytype).then((value) => {
						if(value.code==10000){
								this.tui.toast('升级成功');
								setTimeout(() => {
									uni.switchTab({
									  url: '/pages/my/my'
									});
								}, 1000)
						}else{
							this.tui.toast(value.message);
						}
				})
				//this.tui.href("/pages/success/success")
			}
		}
	}
</script>

<style scoped>
	.tui-pay-item__title {
		width: 100%;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
	}

	.istrue {
		display: block;
	}

	.iswx {
		display: none !important;
	}

	.tui-modal-box {
		padding: 100% !important;
	}

	.tui-pay-amuont {
		color: #ffad10;
		font-weight: 500;
		font-size: 34rpx;
	}

	.tui-modal-custom-text {
		text-align: center;
		font-size: 28rpx;
		margin-bottom: 10rpx;
	}

	.tui-pay-item {
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
	}

	.tui-list-cells {
		padding: 2rpx 0 !important;
		height: 90rpx;
	}

	.tui-pay-logo {
		width: 48rpx;
		height: 48rpx;
		margin-right: 15rpx;
	}

	.tui-radio {
		margin-left: auto;
		transform: scale(0.8);
		transform-origin: 100% center;
	}

	.tui-btn-pay {
		width: 100%;
		padding: 68rpx 35rpx 50rpx 35rpx;
		box-sizing: border-box;
	}

	.tui-recharge {
		color: #fc872d;
		margin-left: auto;
		padding: 12rpx 0;
	}
</style>
